<template>
  <div>
    <div class="row">
      <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box grey-cascade">
          <div class="portlet-body">
            <div class="row">
              <img src="../../../../static/images/roleStep5.png" class="w100 roleStep" alt="">
            </div>
            <div class="row mr0 focusNone">
              <div class="col-md-6 color">
                <div class="col-md-3 l10">
                  <span class="require">*</span>  
                  职务名称 :
                </div>
                <div class="col-md-9">
                  <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="job_name" placeholder="请输入职务名称" type="text">
                </div>
                <span class="errorInfor errorName hide">不能为空</span>
              </div>
              <div class="col-md-6 color">
                <div class="col-md-3 l10">
                <span class="require">*</span> 数据权限 :</div>
                <div class="col-md-9">
                  <i class="el-input__icon el-icon-caret-bottom"></i>
                  <select v-model="selected" :disabled="is_disabled" class="bs-select form-control" @change="changeSelect(selected)" style="margin-right: 25px;">
                    <option v-for="(item,index) in qxList" :value="item.id">{{item.name}}</option>
                  </select>
                </div>
                <span class="errorInfor errorId hide">请选择数据权限</span>
              </div>
             
            </div>
             <div class="tableDiv">
              <table class="table table-striped table-bordered table-hover" style="color: #333;font-weight: 500;" id="sample_3">
                <thead>
                  <tr>
                    
                    <th>
                       模块
                    </th>
                    <th>
                       菜单权限
                    </th>
                    <th>
                       操作权限
                    </th>
                  </tr>
                </thead>
                <tbody>

                <tr class="odd gradeX" v-for="(item,index) in list">
                 
                  <td>
                     {{item.dev_room_id}}
                  </td>
                  <td>
                     {{item.dev_room_name}}
                  </td>
                  
                  <td>
                     {{item.env_temperature}}
                  </td>
                </tr>
              
                </tbody>
              </table>
              <!--无数据提示开始-->
              <transition name="fade">
                <NotConTip :showTip.sync="showTip" :tipText="tipText"></NotConTip>
              </transition>
              <!--无数据提示结束-->
              <div class="block">                    
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 15]"
                  :page-size="page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
      </div>
    </div>
   
  </div>

</template>     

<style scoped>
    .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.center .col-md-3{text-align: center;margin-bottom: 10px;color: #666;font-weight: 500;}
    p {margin: 0 0 10px;}
    .row.center .col-md-6{text-align: left;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.center .col-md-6 input{border: 1px solid #dbdbdb;width: 50px;padding-left: 5px;color: #333;font-weight: 500;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .row.color span{color: #333;font-weight: 500;}
    .modal-body p{color: #333;font-size: 16px;font-weight: 500;}
    .row.m0{margin: 0;}
    .row.m10 .col-md-6 >div{margin-bottom: 10px;}
    .row.m10 .col-md-6 .col-md-3{position: relative;top: 6px;color: #333;font-weight: 500;}
 
    .col-md-3,.col-md-4,.col-md-4>p{font-weight: 500;color: #333;}
    .sliderZy{background: #eee;padding:  10px 15px;margin:15px 0;}
    .sliderZy .col-md-4{padding: 10px 0;}
    .sliderZy .col-md-4:hover{cursor: pointer;}
    .sliderZy .col-md-4{text-align: center;}
    .indextype{display:none;padding: 15px 0;}
    .indextype.active{display: block;}
    .sliderIndex .col-md-4.active{background: #fff;}
    .menuCon{}
    .menuCon li{position: relative;float: left;padding: 6px 15px;margin-right: 10px;margin-bottom:10px;color: #fff;border-radius: 15px !important;background: green;}
    .menuCon li img{width: 15px;position: absolute;right: 5px;top: 5px;}
    .menuCon li img:hover{cursor: pointer;}
    .col-md-6.color .col-md-3{
          color: #666;
          font-weight: 500;
          position: relative;
          top: 5px;
      }
    .col-md-6.color{margin-bottom: 10px;}
    .focusNone .col-md-12 button{left: -204px;}
        .focusNone .col-md-12 button{left: -292px;}
    @media (max-width: 768px){
      .cz{margin-bottom: 0px;}
      .dataTotal{top: -5px;}
      .bs-select{width: 60%;}
    }

</style>

<script>
  import {check,Tips} from '../../../../static/js/pages/tips.js';
  import NotConTip from '../../../components/noConTip.vue' 
  import optVue from '../../../config/optVue.js';

  export default {
    data(){
      return{
        list:[],
        is_modifly:false,
        is_disabled:false,
        page: [], //页码数组
        tipText:"暂无数据",
        showTip:false,
        total:null, //总条数  
        lookObj:{},
        modifyNum:{},
        indexArr:["首页","首页"],
        navArr:["首页1","首页1"],
        zyArr:["首页2","首页2"],
        title:"",
        glNum:6,
        pageNum: null, //页数
        page_size: null, //每页显示多少条
        page_num: null, //当前页码
        job_name:"",
        role_id:"",
        qxList:[
          {id:1,name:"可见全部"},
          {id:2,name:"可见个人"}
        ],
        selected:1,
        qx_id:1,
        type:"",
        filterText:"",
        currentPage:1,
        data2: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    components: {
        NotConTip
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    mounted(){
      document.title = '角色管理';
      this.title = document.title;
      this.type = this.$route.query.type;
      if(this.type=='update'){ //修改
        //optVue.getRoleList(this);//得到角色类型
        this.role_id = window.localStorage.getItem('role_id');
        optVue.getModifyDygl(this,this.role_id);
        this.is_modifly = false;
      }

      if(this.type=='add'){
        this.is_modifly = false;
        //optVue.getRoleList(this);//得到角色类型
      }

      if(this.type=='infor'){ //修改
        //optVue.getRoleList(this);//得到角色类型
        this.role_id = window.localStorage.getItem('role_id');
        optVue.getModifyDygl(this,this.role_id);
        this.is_modifly = true;
        this.is_disabled = true;
      }

      $(function(){
        /*全选反选*/
        check.init($(".table-checkbox"),$(".checkboxes"));     
      })
    },
    methods:{
      handleSizeChange(val) {
        var pageArr = {
          page_num:this.currentPage,
          page_size : val
        }
        $(".checkboxes").prop({checked:false});
        $(".group-checkable").prop({checked:false});
        this.pageFun(pageArr);
      },
      handleCurrentChange(val) {
        var pageArr = {
          page_num : val,
          page_size : this.page_size
        }
        $(".checkboxes").prop({checked:false});
        $(".group-checkable").prop({checked:false});
        this.loading = false;
        this.pageFun(pageArr);
      },
      pageFun:function(pageArr){
        $(".checkboxes").prop({checked:false});
        $(".group-checkable").prop({checked:false});
        this.loading = false;
        var that = this;
       
        setTimeout(function(){
          that.loading = true;
          optVue.nhjlglNowPag(that,pageArr);
        },that.loadTime)
      }, 
      addPrev:function(){
        this.$router.push({path:'/jsgljcxx', query: {type: 'add'}})
      }, 
      addNext:function(){
        this.$router.push({path:'/jsglapp', query: {type: 'add'}})
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
    }
  }

</script>



